<!--
 * @Descripttion: 
 * @Author: Kevin
 * @Date: 2022-06-16 11:10:18
 * @LastEditors: xw908163987
 * @LastEditTime: 2023-08-03
-->
<template>
  <div>
    <a-col
      :span="24 / printColumns"
      :style="
        printMethod == 'printPosSlip' ? '' : 'border-bottom: 1px solid #999'
      "
      :key="index"
    >
      <div class="voucher-preview-wrapper">
        <div class="voucher-preview__logo-wrapper" v-if="imgDisplay">
          <img :src="voucher.imgUrl" class="voucher-preview__logo" />
        </div>
        <div class="voucher-preview__code">
          <label>{{ $t('userManage.printVoucherCode') }}</label>
          <span>{{ voucher.voucherCode }}</span>
        </div>
        <div class="voucher-param-wrap">
          <div class="voucher-preview__param" v-if="voucher.showPackageName">
            <label>{{ $t('userManage.printProfileName') }}</label>
            <span>{{ voucher.packageName }}</span>
          </div>
          <div class="voucher-preview__param" v-if="voucher.showBindMac">
            <label>{{ $t('userManage.printBindMac') }}</label>
            <span> {{ voucher.bindMac }}</span>
          </div>
          <div class="voucher-preview__param" v-if="voucher.showConcurrent">
            <label> {{ $t('userManage.printConcurrentDevices') }}</label>
            <span> {{ voucher.noOfDeviceObj }}</span>
          </div>
          <div class="voucher-preview__param" v-if="voucher.showPeriod">
            <label> {{ $t('userManage.printPeriod') }}</label>
            <span> {{ voucher.timePeriodObj }}</span>
          </div>
          <div class="voucher-preview__param" v-if="voucher.showData">
            <label> {{ $t('userManage.printDataQuota') }}</label>
            <span>{{ voucher.quotaObj }}</span>
          </div>
          <div class="voucher-preview__param" v-if="voucher.showDownload">
            <label>{{ $t('userManage.printDownloadSpeed') }}</label>
            <span> {{ voucher.downloadRateLimitObj }}</span>
          </div>
          <div class="voucher-preview__param" v-if="voucher.showUpload">
            <label> {{ $t('userManage.printUploadSpeed') }}</label>
            <span>{{ voucher.uploadRateLimitObj }}</span>
          </div>
        </div>
        <div class="voucher-preview__footer" style="${customedStyle}">
          {{ voucher.customedText }}
        </div>
      </div>
      <div
        v-if="printMethod == 'printPosSlip'"
        style="border-bottom: 1px solid black; width: 340px"
      ></div>
    </a-col>
    <div v-if="displayPageBreakAfter()" style="page-break-after: always"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { requestHttp, maccApi } from '@utils/index';
import i18n from '@/locales';

export default {
  name: 'VoucherCard',
  components: {},
  props: {
    voucher: {
      type: Object,
      default: () => {},
    },
    index: {
      type: Number,
    },
    printMethod: {
      type: String,
    },
    printColumns: {
      type: Number,
    },
    vouchersLength: {
      type: Number,
    },
  },
  data() {
    return {
      imgDisplay: false,
      spitNum: 0,
    };
  },
  created() {
    this.imgDisplay = /(jpg|jpeg|png|gif)$/.test(this.voucher.imgUrl)
      ? true
      : false;
    this.spitNum = 0;
    this.getVoucherContent();
  },
  watch: {},
  computed: {},
  mounted() {

  },
  methods: {
    displayPageBreakAfter() {
      if (this.printMethod == 'printOneColumn') {
        if (
          (this.index + 1) % this.spitNum === 0 &&
          this.index != this.vouchersLength - 1
        )
          return true;
        else return false;
      } else if (this.printMethod == 'printTwoColumn') {
        if (
          (this.index + 1) % this.spitNum === 0 &&
          this.index != this.vouchersLength - 1
        )
          return true;
        else return false;
      } else {
        if (
          (this.index + 1) % this.spitNum === 0 &&
          this.index != this.vouchersLength - 1
        )
          return true;
        else return false;
      }
    },
    getVoucherContent() {
      let paramShows = [];
      let imgStyle = /(jpg|jpeg|png|gif)$/.test(this.voucher.imgUrl)
        ? ''
        : 'display: none;';
      let customedStyle =
        this.voucher.customedText !== '' ? '' : 'display: none;';
      let packageNameStyle =
        this.voucher.showPackageName === true ? '' : 'display: none;';
      let bindMacStyle =
        this.voucher.showBindMac === true ? '' : 'display: none;';
      let concurrentStyle =
        this.voucher.showConcurrent === true ? '' : 'display: none;';
      let periodStyle =
        this.voucher.showPeriod === true ? '' : 'display: none;';
      let dataStyle = this.voucher.showData === true ? '' : 'display: none;';
      let downloadStyle =
        this.voucher.showDownload === true ? '' : 'display: none;';
      let uploadStyle =
        this.voucher.showUpload === true ? '' : 'display: none;';
      paramShows.push(packageNameStyle);
      paramShows.push(bindMacStyle);
      paramShows.push(concurrentStyle);
      paramShows.push(periodStyle);
      paramShows.push(dataStyle);
      paramShows.push(downloadStyle);
      paramShows.push(uploadStyle);

      let paramShowsCount = 0;
      for (let paramShow of paramShows) {
        if (paramShow === '') {
          paramShowsCount++;
        }
      }
      if (this.spitNum === 0) {
        if (imgStyle === 'display: none;') {
          // 无图
          if (customedStyle === 'display: none;') {
            if (paramShowsCount === 0) {
              this.spitNum = 9 * this.printColumns;
            } else if (paramShowsCount <= 2) {
              this.spitNum = 8 * this.printColumns;
            } else {
              this.spitNum = 6 * this.printColumns;
            }
          } else {
            if (paramShowsCount === 0) {
              this.spitNum = 7 * this.printColumns;
            } else if (paramShowsCount <= 2) {
              this.spitNum = 6 * this.printColumns;
            } else {
              this.spitNum = 5 * this.printColumns;
            }
          }
        } else {
          // 右图
          if (customedStyle === 'display: none;') {
            if (paramShowsCount === 0) {
              this.spitNum = 5 * this.printColumns;
            } else if (paramShowsCount <= 2) {
              this.spitNum = 4 * this.printColumns;
            } else {
              this.spitNum = 4 * this.printColumns;
            }
          } else {
            if (paramShowsCount === 0) {
              this.spitNum = 5 * this.printColumns;
            } else if (paramShowsCount <= 2) {
              this.spitNum = 4 * this.printColumns;
            } else {
              this.spitNum = 4 * this.printColumns;
            }
          }
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
html,
body {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  color: #262626;
}
.voucher-preview-wrapper {
  width: 340px;
  border: 1px solid #999;
  padding: 8px;
  text-align: left;
  margin-bottom: 5px;
  margin-top: 5px;
}
.voucher-preview-wrapper span {
  font-weight: bold;
}
.voucher-preview__logo-wrapper {
  text-align: center;
}

.voucher-preview__logo {
  /* max-width: 100%;
        min-width: 176px; */
  height: 40px;
  margin-bottom: 8px;
}
.voucher-preview__code {
  width: 100%;
}
.voucher-preview__code span {
  font-size: 20px;
  line-height: 20px;
  display: block;
  text-align: center;
}
.voucher-param-wrap {
  display: flex;
  flex-wrap: wrap;
}
.voucher-preview__param {
  width: 49%;
  height: 50px;
  /* display: inline-block;
        margin-bottom: 4px; */
}
.voucher-preview-wrapper label {
  display: block;
  font-weight: normal;
  font-size: 12px;
}
.voucher-preview__param span {
  font-weight: bold;
  font-size: 14px;
  width: 100%;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  word-break: keep-all;
}
.voucher-preview__footer {
  font-size: 12px;
  text-align: center;
  padding-top: 5px;
  border-top: 1px solid #333;
}
</style>
